<template>
  <view class="container">
    <view class="cropper-wrapper">
      <image-cropper 
        id="image-cropper"
        :src="src" 
        @ready="cropperReady"
        @beforeDraw="cropperBeforeDraw"
        :outputFileType="fileType"
        :outputQuality="quality"
        :aspectRatio="aspectRatio"
        :minBoxWidth="200"
        :minBoxHeight="200"
      ></image-cropper>
    </view>
    
    <view class="toolbar">
      <view class="btn-item" @click="cancel">取消</view>
      <view class="btn-item" @click="rotate">旋转</view>
      <view class="btn-item confirm" @click="confirm">确定</view>
    </view>
  </view>
</template>

<script>
  // 建议下载 image-cropper 组件到 components 目录
  // https://ext.dcloud.net.cn/plugin?id=202
  import ImageCropper from '@/components/image-cropper/image-cropper.vue';
  
  export default {
    components: {
      ImageCropper
    },
    data() {
      return {
        src: '',            // 图片路径
        fileType: 'jpg',    // 输出图片格式
        quality: 0.9,       // 图片质量
        aspectRatio: 1,     // 裁剪比例，1为正方形
        cropper: null,      // 裁剪组件实例
        cropperData: {}     // 裁剪数据
      };
    },
    onLoad(options) {
      if (options.src) {
        this.src = decodeURIComponent(options.src);
      }
    },
    onReady() {
      // 获取裁剪组件实例
      this.cropper = this.getImageCropper();
    },
    methods: {
      // 获取裁剪组件实例
      getImageCropper() {
        return this.selectComponent('#image-cropper');
      },
      
      // 裁剪组件加载完成
      cropperReady(e) {
        console.log('cropper ready', e);
      },
      
      // 绘制前回调
      cropperBeforeDraw(e) {
        this.cropperData = e;
      },
      
      // 旋转图片
      rotate() {
        if (this.cropper) {
          this.cropper.setAngle(this.cropper.data.angle + 90);
        }
      },
      
      // 确认裁剪
      confirm() {
        if (this.cropper) {
          uni.showLoading({
            title: '裁剪中...'
          });
          
          // 获取裁剪后的图片路径
          this.cropper.getCropperImage(tempFilePath => {
            uni.hideLoading();
            
            if (tempFilePath) {
              // 通过事件通信将裁剪后的图片传递给上一个页面
              const eventChannel = this.getOpenerEventChannel();
              eventChannel.emit('cropImage', { tempFilePath });
              uni.navigateBack();
            } else {
              uni.showToast({
                title: '裁剪失败，请重试',
                icon: 'none'
              });
            }
          });
        }
      },
      
      // 取消裁剪
      cancel() {
        uni.navigateBack();
      }
    }
  };
</script>

<style lang="scss">
  .container {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    flex-direction: column;
  }
  
  .cropper-wrapper {
    flex: 1;
    overflow: hidden;
  }
  
  .toolbar {
    height: 100rpx;
    background-color: #121212;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    
    .btn-item {
      color: #fff;
      font-size: 32rpx;
      padding: 20rpx;
      
      &.confirm {
        color: $uni-color-primary;
        font-weight: bold;
      }
    }
  }
</style> 